<template>
  <div class="mine_box">
    <div id="box">
      <van-row style="padding-top: 20px; text-align: center">
        <van-col span="2" offset="1"
          ><van-icon name="wap-nav" size="20" @click="showSide"
        /></van-col>
        <van-popup
          v-model:show="showSideStatus"
          round
          position="left"
          style="height: 100%; width: 78%"
        >
          <van-cell-group
            inset
            style="text-align: left; margin-top: 45px"
            border="false"
          >
            <van-cell
              title="我的草稿"
              icon="notes-o"
              style="margin-bottom: 10px"
            />
            <van-cell
              title="订单"
              icon="todo-list-o"
              style="margin-bottom: 10px"
            />
            <van-cell
              title="购物车"
              icon="cart-o"
              style="margin-bottom: 10px"
            />
            <van-cell
              title="小蓝卡会员"
              icon="vip-card-o"
              style="margin-bottom: 10px"
            />
            <van-cell
              title="社区公约"
              icon="flower-o"
              style="margin-bottom: 10px"
            />
            <van-cell
              title="扫一扫"
              icon="coupon-o"
              style="margin-bottom: 10px"
            />
            <van-cell
              title="二维码"
              icon="coupon-o"
              style="margin-bottom: 10px"
              @click="showQR"
            />
            <van-cell
              title="设置"
              icon="setting-o"
              style="margin-bottom: 10px"
            />
            <van-cell
              title="帮助与客服"
              icon="friends-o"
              style="margin-bottom: 10px"
              @click="showService"
            />
            <van-cell
              title="退出登录"
              icon="user-circle-o"
              style="margin-bottom: 10px"
              @click="exit"
            />
          </van-cell-group>
        </van-popup>
        <van-col span="2" offset="18" @click="showShare = true"
          ><van-icon name="share-o" size="20"
        /></van-col>
        <van-share-sheet
          v-model:show="showShare"
          title="立即分享给好友"
          :options="options"
          @select="onSelect"
        />
      </van-row>
      <van-row style="padding-top: 20px">
        <van-col span="5" offset="1">
          <van-image round width="5rem" height="5rem" :src="info.img" />
        </van-col>
        <van-col offset="1">
          <van-row style="padding-top: 15px; font-size: 25px">
            <span>{{ info.name }}</span>
          </van-row>
          <van-row style="padding-top: 15px; font-size: 10px">
            <span>小蓝书号：{{ info.id }}</span>
          </van-row>
        </van-col>
      </van-row>

      <van-row style="padding-top: 15px; padding-bottom: 15px">
        <van-col span="12">
          <van-row style="text-align: center">
            <van-col span="6" offset="1"
              ><span style="font-size: 8px">{{
                this.friend.length
              }}</span></van-col
            >
            <van-col span="6"
              ><span style="font-size: 8px">{{ 2 }}</span></van-col
            >
            <van-col span="10"
              ><span style="font-size: 8px">{{ 3 }}</span></van-col
            >
          </van-row>
          <van-row style="text-align: center">
            <van-col span="6" offset="1"
              ><span style="font-size: 8px" @click="showConcern"
                >关注</span
              ></van-col
            >
            <van-col span="6"
              ><span style="font-size: 8px" @click="showFans"
                >粉丝</span
              ></van-col
            >
            <van-col span="10"
              ><span style="font-size: 8px" @click="showZan"
                >获赞与收藏</span
              ></van-col
            >
          </van-row>
        </van-col>
        <van-col span="5" offset="6">
          <van-button round type="default" size="small" @click="showEdit"
            >编辑资料</van-button
          >
        </van-col>
      </van-row>
    </div>
    <div>
      <van-sticky>
        <van-tabs swipeable>
          <van-tab title="笔记">
            <van-empty description="你还没有发布笔记哦" v-show="is_show" />
            <div class="focus" v-show="!is_show">
              <div class="focus_left">
                <InfoBoxVue
                  class="info_box"
                  v-for="(item, index) in list"
                  :key="index"
                  @click="detailInfo(item.uid, item.pid)"
                >
                  <template v-slot:img>
                    <van-image
                      fit="contain"
                      radius="6 6 0 0"
                      :src="item.imageUrl"
                      alt="fail"
                      class="img"
                    ></van-image>
                  </template>
                  <template v-slot:title>{{ item.title }}</template>
                  <template v-slot:head_img>
                    <van-image
                      round
                      class="head_img"
                      width="20"
                      height="20"
                      :src="item.headUrl"
                    ></van-image>
                  </template>
                  <template v-slot:author_name>{{ item.name }}</template>
                  <template v-slot:like
                    ><van-icon
                      v-if="item.isactive == 'false'"
                      name="like-o"
                      color="red"
                    ></van-icon>
                    <van-icon name="like" color="red" v-else></van-icon>
                  </template>
                  <template v-slot:like_cnt>
                    <div>
                      {{ item.likes }}
                    </div>
                  </template>
                </InfoBoxVue>
              </div>
            </div>
          </van-tab>

          <van-tab title="收藏"
            ><van-empty description="你还没有收藏哦" v-show="is_collect" />
            <div class="focus" v-show="!is_collect">
              <div class="focus_left">
                <InfoBoxVue
                  class="info_box"
                  v-for="(item, index) in collect"
                  :key="index"
                  @click="detailInfo(item.uid, item.pid)"
                >
                  <template v-slot:img>
                    <van-image
                      fit="contain"
                      radius="6 6 0 0"
                      :src="item.imageUrl"
                      alt="fail"
                      class="img"
                    ></van-image>
                  </template>
                  <template v-slot:title>{{ item.title }}</template>
                  <template v-slot:head_img>
                    <van-image
                      round
                      class="head_img"
                      width="20"
                      height="20"
                      :src="item.headUrl"
                    ></van-image>
                  </template>
                  <template v-slot:author_name>{{ item.name }}</template>
                  <template v-slot:like
                    ><van-icon
                      v-if="item.isactive == 'false'"
                      name="like-o"
                      color="red"
                    ></van-icon>
                    <van-icon name="like" color="red" v-else></van-icon>
                  </template>
                  <template v-slot:like_cnt>
                    <div>
                      {{ item.likes }}
                    </div>
                  </template>
                </InfoBoxVue>
              </div>
            </div>
          </van-tab>
          <van-tab title="赞过">
            <van-empty description="你还没有赞过哦" v-show="is_love" />
            <div class="focus" v-show="!is_love">
              <div class="focus_left">
                <InfoBoxVue
                  class="info_box"
                  v-for="(item, index) in love_list"
                  :key="index"
                  @click="detailInfo(item.uid, item.pid)"
                >
                  <template v-slot:img>
                    <van-image
                      fit="contain"
                      radius="6 6 0 0"
                      :src="item.imageUrl"
                      alt="fail"
                      class="img"
                    ></van-image>
                  </template>
                  <template v-slot:title>{{ item.title }}</template>
                  <template v-slot:head_img>
                    <van-image
                      round
                      class="head_img"
                      width="20"
                      height="20"
                      :src="item.headUrl"
                    ></van-image>
                  </template>
                  <template v-slot:author_name>{{ item.name }}</template>
                  <template v-slot:like
                    ><van-icon
                      v-if="item.isactive == 'false'"
                      name="like-o"
                      color="red"
                    ></van-icon>
                    <van-icon name="like" color="red" v-else></van-icon>
                  </template>
                  <template v-slot:like_cnt>
                    <div>
                      {{ item.likes }}
                    </div>
                  </template>
                </InfoBoxVue>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </van-sticky>
    </div>
    <VanDialog v-model:show="showZanStatus" title="获赞与收藏">
      <van-divider />
      <van-row id="zan">
        <van-col span="18" offset="3">
          <van-icon name="comment" color="#1989fa" size="25" />
          <span style="font-size: 15px; color: gray"
            >&nbsp;&nbsp;&nbsp;&nbsp;当前发布笔记数&nbsp;&nbsp;</span
          >
          <span>{{ this.list.length }}</span>
        </van-col>
      </van-row>
      <van-row id="zan">
        <van-col span="18" offset="3">
          <van-icon name="like" color="#ee0a24" size="25" />
          <span style="font-size: 15px; color: gray"
            >&nbsp;&nbsp;&nbsp;&nbsp;当前获得点赞数&nbsp;&nbsp;</span
          >
          <span>{{ this.love_list.length }}</span>
        </van-col>
      </van-row>
      <van-row id="zan">
        <van-col span="18" offset="3">
          <van-icon name="star" color="yellow" size="25" />
          <span style="font-size: 15px; color: gray"
            >&nbsp;&nbsp;&nbsp;&nbsp;当前获得收藏数&nbsp;&nbsp;</span
          >
          <span>{{ this.collect.length }}</span>
        </van-col>
      </van-row>
    </VanDialog>
    <VanDialog v-model:show="showQRStatus">
      <div ref="qrcode" id="qr"></div>
    </VanDialog>
  </div>
</template>

<script>
import InfoBoxVue from "../../components/Home/InfoBox.vue";
import { ref } from "vue";
import { Dialog } from "vant";
import QRCode from "qrcodejs2";
import { Toast } from "vant";
export default {
  setup() {
    const showShare = ref(false);
    const options = [
      [
        { name: "微信", icon: "wechat" },
        { name: "朋友圈", icon: "wechat-moments" },
        { name: "微博", icon: "weibo" },
        { name: "QQ", icon: "qq" },
      ],
      [
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
        { name: "小程序码", icon: "weapp-qrcode" },
      ],
    ];

    const onSelect = (option) => {
      Toast(option.name);
      showShare.value = false;
    };

    const showSideStatus = ref(false);
    const showSide = () => {
      showSideStatus.value = true;
    };

    const showZanStatus = ref(false);
    const VanDialog = Dialog.Component;
    const showZan = () => {
      showZanStatus.value = true;
    };

    return {
      options,
      showShare,
      showSideStatus,
      showSide,
      showZanStatus,
      VanDialog,
      showZan,
      onSelect,
    };
  },
  data() {
    return {
      showQRStatus: false,
      name: "",
      is_show: true,
      head: "",
      info: {
        img: "",
        name: "",
        id: "id",
        sex: "sex",
      },
      list: [],
      item: [],
      friend: [],
      collect: [],
      is_collect: true,
      is_love: true,
      love_list: [],
    };
  },
  created() {
    this.friend = JSON.parse(localStorage.getItem("friend"));
  },
  mounted() {
    //渲染个人数据
    this.info.img = localStorage.getItem("head");
    this.info.id = localStorage.getItem("qq");
    this.info.name = localStorage.getItem("name");
    // 获取作品信息
    if (localStorage.getItem("publish")) {
      this.list.push(JSON.parse(localStorage.getItem("publish")));
    }
    if (this.list.length != 0) {
      this.is_show = false;
    } else {
      this.is_show = true;
    }
    this.name = localStorage.getItem("name");
    var col = JSON.parse(localStorage.getItem("collect"));
    var find = JSON.parse(localStorage.getItem("find"));
    var flag = 0;
    //获取收藏数据
    for (var i in find) {
      for (var j in col) {
        if (col[j].uid == find[i].uid && col[j].pid == find[i].pid) {
          this.collect.unshift(find[i]);
          flag = 1;
        }
      }
    }
    //显示相应界面
    if (flag) {
      this.is_collect = false;
    } else {
      this.is_collect = true;
    }
    this.getlove();
  },
  methods: {
    // 获取点赞数据
    getlove() {
      var love = JSON.parse(localStorage.getItem("love"));
      var find = JSON.parse(localStorage.getItem("find"));
      var flag = 0;
      for (var i in find) {
        for (var j in love) {
          if (love[j].uid == find[i].uid && love[j].pid == find[i].pid) {
            this.love_list.unshift(find[i]);
            flag = 1;
          }
        }
      }
      if (flag) {
        this.is_love = false;
      } else {
        this.is_love = true;
      }
    },
    showEdit() {
      this.$router.push("/edit");
    },
    showFans() {
      this.$router.push("/fans/" + localStorage.getItem("uid"));
    },
    showConcern() {
      this.$router.push("/concern/" + localStorage.getItem("uid"));
    },
    exit() {
      Dialog.confirm({
        message: "确认退出登录？",
      })
        .then(() => {
          this.$router.replace("/login");
        })
        .catch(() => {});
    },
    showService() {
      this.$router.push("/service");
    },
    showQR() {
      this.showQRStatus = true;
      // this.$refs.qrcode.innerHTML = ''; //清除二维码方法一
      new QRCode(this.$refs.qrcode, {
        text: "郑小菁是猪", //页面地址 ,如果页面需要参数传递请注意哈希模式#
        width: 150,
        height: 150,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
    },
    detailInfo(uid, pid) {
      this.$router.push("/home/detailinfo/" + uid + "/" + pid);
    },
  },
  components: {
    InfoBoxVue,
  },
};
</script>


<style scoped>
.mine_box {
  margin-bottom: 50px;
}
#box {
  background: rgba(247, 245, 245, 0) url("../../assets/user.jpg") center
    no-repeat fixed;
}
#zan {
  height: 50px;
  line-height: 50px;
  margin-bottom: 15px;
}
#qr {
  height: 150px;
  width: 150px;
  margin-left: 85px;
  margin-right: 85px;
  margin-top: 30px;
  margin-bottom: 30px;
}
.focus {
  margin: 40px 10px 50px 8px;
  width: 95%;
  height: 100%;
  line-height: 20px;
  text-align: center;
  column-count: 2;
  column-gap: 7px;
}
.info_box {
  /* margin-top: 10px; */
  height: 100%;
  break-inside: avoid;
}
.img {
  width: 100%;
  border-radius: 6px 6px 0 0;
}
.head_img {
  margin-left: 10px;
  width: 20px;
  height: 20px;
  line-height: 30px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid rgba(187, 187, 187, 100);
}
</style>